import { defineComponent,reactive,watch } from 'vue'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    DesktopOutlined
  } from '@ant-design/icons-vue';
import './index.scss'
export default defineComponent({
    components: {
        MenuFoldOutlined,
        MenuUnfoldOutlined,
        PieChartOutlined,
        DesktopOutlined
      },
    setup(){
        const state = reactive({
            collapsed: false,
            selectedKeys: ['1'],
            openKeys: ['sub1'],
            preOpenKeys: ['sub1'],
          });
      
          watch(
            () => state.openKeys,
            (val, oldVal) => {
              state.preOpenKeys = oldVal;
            },
          );
          const toggleCollapsed = () => {
            state.collapsed = !state.collapsed;
            state.openKeys = state.collapsed ? [] : state.preOpenKeys;
          };

        return ()=>{
            return <>
             <div class='menus' style="width: 256px">
                <a-button type="primary" onClick={toggleCollapsed} style="margin-bottom: 16px">
                {state.collapsed ? <MenuUnfoldOutlined /> :<MenuFoldOutlined />}
                </a-button>
                <a-menu mode="inline" theme="dark" inlineCollapsed={state.collapsed}
                    v-models={[
                        [state.openKeys,'openKeys'],
                        [state.selectedKeys,'selectedKeys']
                    ]} 
                >
                    <a-menu-item key="1"> <PieChartOutlined /> <span>Option 1</span> </a-menu-item>
                    <a-menu-item key="2"> <DesktopOutlined /> <span>Option 2</span> </a-menu-item>
                </a-menu>
            </div>
            <router-view></router-view>
            </>
        }
    }
})